<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>倒计时</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			.box {
				background: url("img/bj.png");
				width: 190px;
				height: 260px;
				margin: 200px auto;
				background-size: 100%;
				position: relative;
				padding-top: 30px;
			}
			
			
			img {
				width: 100px;
				height: 150px;
				position: relative;
			}
			
			.time {
				position: absolute;
				bottom: 40px;
				left: 30px;
			}
			
			h2 {
				
				font-size: 18px;
				color: white;
				text-align: center;
			}
			
			.app {
				position: absolute;
				font-size: 11px;
				bottom: 80px;
				left: 43px;
				color: white;
			}
			.app span{
				font-size: 18px;
			}
			.time span{
				display: inline-block;
				width: 30px;
				height: 30px;
				line-height: 30px;
				text-align: center;
				background: #333;
				color: white;
			}
		</style>
	</head>

	<body>

		<div class="box">
			<h2>京东秒杀</h2>
			<div class="app">
				<span>20:00</span> 点场 倒计时
			</div>
			<div class="time">
				<span id="hour">0</span> :
				<span id="mus">0</span> :
				<span id="mis">0</span>
			</div>
		</div>

		<script>
					var a = 23;
					var b = 59;
					var c = 59;
			
						
					setInterval(function(){
						var d = new Date();
						var s1 = document.querySelector("#hour");
						var s2 = document.querySelector("#mus");
						var s3 = document.querySelector("#mis");
						s1.innerHTML = a - d.getHours();
						s2.innerHTML = b - d.getMinutes();
						s3.innerHTML = c - d.getSeconds();
						if(s1.innerHTML < 10){
							s1.innerHTML='0'+s1.innerHTML;
						}
						if(s2.innerHTML < 10){
							s2.innerHTML='0'+s2.innerHTML;
						}
						if(s3.innerHTML < 10){
							s3.innerHTML='0'+s3.innerHTML;
						}
					},1000)
		</script>
	</body>

</html>